<template>
  <div class="recharge-button">
    <van-field
      :clearable="true"
      :maxlength="11"
      placeholder="请输入手机号码"
      v-model="tel"
      type="number"
      center
    />
    <van-cell-group>
      <van-field
        :maxlength="6"
        v-model="code"
        center
        type="number"
        clearable
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            round
            :disabled="tel.length < 11"
            class="button"
            type="primary"
            @click="handleClick('codeClick')"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <van-button
      @click="handleClick('payClick')"
      round
      :disabled="code.length < 4 || tel.length < 11"
      class="pay-button"
      type="primary"
    >
      <slot>缴费</slot>
    </van-button>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  props: {

  },
  components: {

  },
  emits:['payClick','codeClick'],
  setup(props,{emit}) {
     const tel=ref('')
     const code=ref('')
     const handleClick=(type)=>{
       emit(type)
     }

    return {
      tel,
      code,
      handleClick
    }

  }
})
</script>

<style scoped lang="less">
.recharge-button {
  .button {
    width: 30vw;
    height: 4.6vh;
  }
  .pay-button {
    margin-top: 2.6vh;
    width: 100%;
  }
  &:deep(.van-cell__value) {
    padding: 2vw 0;
    border-bottom: 1px solid #d9d9d9;
  }
}
</style>
